<template>
  <view>
    <view @click="getImage" class="image">
      <u-icon name="photo" size="50rpx"></u-icon>
      <view>选择图片</view>
    </view>
    <me-cutter :maxSize="width" @ok="onok" @cancel="oncancle" :url="base64" :fixed="true" :width="width" :height="height"></me-cutter>
  </view>
</template>

<script>
import { parsePhoto, base64tofile } from '@/common/api/system.js';
let videoAd = null;
const d = new Date();
export default {
  data() {
    return {
      width: 0,
      height: 0,
      base64: '',
      size: [],
    };
  },
  onLoad() {
    let numberAd = uni.getStorageSync('numberAd');
    if (numberAd == 'ons' || (numberAd != d.getDate() && wx.createRewardedVideoAd)) {
      videoAd = wx.createRewardedVideoAd({
        adUnitId: 'adunit-952765eecba4e4f2',
      });
      videoAd.onLoad(() => {});
      videoAd.onError((err) => {});
      videoAd.onClose((res) => {
        console.log(res);
        if (res.isEnded) {
          uni.setStorageSync('numberAd', d.getDate());
          uni.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album'],
            success: (res) => {
              const image = res.tempFilePaths[0];
              uni.getImageInfo({
                src: image,
                success: (res) => {
                  this.size.value = `${res.width}*${res.height}`;
                  this.photo(image);
                },
              });
            },
          });
        } else {
          this.$u.toast('请看完一次视频后再试');
        }
      });
    }
  },
  methods: {
    getImage() {
      let numberAd = uni.getStorageSync('numberAd');
      if (numberAd == 'ons' || (numberAd != d.getDate() && videoAd)) {
        uni.showModal({
          title: '提示',
          content: '每天要看一次视频才能开始制作证件照，点击确认后开始播放广告视频',
          success: (res) => {
            if (res.cancel) return;
            videoAd.show().catch(() => {
              // 失败重试
              videoAd
                .load()
                .then(() => videoAd.show())
                .catch((err) => {
                  console.log('激励视频 广告显示失败');
                });
            });
          },
        });
      } else {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album'],
          success: (res) => {
            const image = res.tempFilePaths[0];
            uni.getImageInfo({
              src: image,
              success: (res) => {
                this.size.value = `${res.width}*${res.height}`;
                this.photo(image);
              },
            });
          },
        });
      }
    },
    //调用裁剪
    cut(base64, width, height) {
      this.width = width;
      this.height = height;
      parsePhoto(base64).then((res) => {
        var data = 'data:image/png;base64,' + res.foreground;
        base64tofile(data).then((res) => {
          this.base64 = res;
        });
      });
    },
    //裁剪成功
    onok(e) {
      var base64 = e.path;
      uni.saveImageToPhotosAlbum({
        filePath: base64,
        success() {
          uni.showToast({
            title: '保存成功',
          });
        },
      });
    },
    //裁剪界面点击了返回
    oncancle() {
      this.base64 = '';
    },

    photo(url) {
      const size = this.size.value.split('*');
      const base64 = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(url, 'base64');
      this.cut(base64, size[0], size[1]);
    },
  },
};
</script>

<style lang="scss" scoped>
.image {
  width: 690rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 70rpx);
  margin: 30rpx;
  font-size: 38rpx;
  background-color: #f3f4f6;
  border-radius: 16rpx;

  view {
    margin-top: 20rpx;
  }
}
</style>
